<template>
  <div class="main">
    <div class="header">
      <el-popover
        placement="bottom-end"
        trigger="click"
      >
        <div class="ctrl-group">
          <div
            class="ctrl-item"
            @click="handleModifyRemarkClick"
          >
            修改备注
          </div>
          <div
            class="ctrl-item"
            @click="handleOpenFriendMoveClick"
          >
            移动分组
          </div>
          <div
            class="ctrl-item"
            @click="openFriendDeleteConfirm"
          >
            删除好友
          </div>
        </div>
        <i
          class="el-icon-more edit"
          slot="reference"
        ></i>
      </el-popover>
    </div>
    <div class="content">
      <div class="head-info">
        <div>
          <div class="user-name">
            {{_friendUserName}}
            <i
              v-if="_sex ==='男'"
              class="el-icon-male sex male"
            ></i>
            <i
              v-else-if="_sex ==='女'"
              class="el-icon-female sex female"
            ></i>
            <i v-else></i>
          </div>
          <div class="user-motto">
            {{_friendMotto}}
          </div>
        </div>
        <div class="user-avatar">
          <img
            class="avatar"
            :src="_avatar"
          />
        </div>
      </div>
      <div class="other-info">
        <div class="info-item">
          <div class="label">备注</div>
          <div
            class="remark"
            @click="handleModifyRemarkClick"
          >
            {{_friendRemark}}
          </div>
        </div>
        <div class="info-item">
          <div class="label">账号</div>
          <span>{{_friendLoginName}}</span>
        </div>
        <div class="info-item">
          <div class="label">性别</div>
          <div>{{_sex}}</div>
        </div>
        <div class="info-item">
          <div class="label">电话</div>
          <div>{{_friendPhoneNum}}</div>
        </div>
        <div class="info-item">
          <div class="label">邮箱</div>
          <div>{{_friendEmail}}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button
        type="primary"
        class="footer-btn"
        @click="handleSendMsgClick"
      >
        发消息
      </el-button>
    </div>
    <form-dialog
      title="移动好友"
      :visible.sync="moveFriendVisible"
    >
      <move-friend-form
        ref="moveFriend"
        :user="dataInfo"
        @cancel="handleMoveFriendCancel"
        @submit="handleMoveFriendSubmit"
      />
    </form-dialog>
    <form-dialog
      title="修改备注"
      :visible.sync="modifyRemarkVisible"
    >
      <modify-remark-form
        ref="remark"
        :friendId="dataInfo.friendId"
        :friendRemark="dataInfo.friendRemark"
        @cancel="handleModifyRemarkCancel"
        @submit="handleModifyRemarkSubmit"
      />
    </form-dialog>
  </div>
</template>

<script>
import MoveFriendForm from '../form/MoveFriendForm'
import ModifyRemarkForm from '../form/ModifyRemarkForm'
import { friendDelete } from '@/api/social'
export default {
  name: 'UserDetail',
  components: {
    MoveFriendForm,
    ModifyRemarkForm
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      moveFriendVisible: false,
      modifyRemarkVisible: false
    }
  },
  computed: {
    _friendRemark () {
      return this.dataInfo.friendRemark || '点击添加备注'
    },
    // 好友账号
    _friendLoginName () {
      return this.dataInfo.friendLoginName || -1
    },
    // 用户名
    _friendUserName () {
      return this.dataInfo.friendUserName || '暂无昵称'
    },
    _friendMotto () {
      return this.dataInfo.friendMotto || '暂无个性签名'
    },
    // 头像
    _avatar () {
      return this.dataInfo.friendAvatar || this.$const.DEFAULT_PICTURE
    },
    // 性别
    _sex () {
      switch (this.dataInfo.friendSex) {
        case '0':
          return '男'
        case '1':
          return '女'
        default:
          return '保密'
      }
    },
    // 电话
    _friendPhoneNum () {
      return this.dataInfo.friendPhoneNum || '暂不能查看'
    },
    // 邮箱
    _friendEmail () {
      return this.dataInfo.friendEmail || '暂不能查看'
    }
  },
  methods: {
    // 点击发送消息
    handleSendMsgClick () {
      this.$message.info('功能开发中，敬请期待。。。')
    },
    // 删除好友
    // 打开删除好友提示窗口
    async openFriendDeleteConfirm () {
      try {
        await this.$warning(`将删除好友【${this._friendUserName}】，是否继续？`)
        this.handleFriendDelete()
      } catch {
        this.$message.info('已取消删除')
      }
    },
    // 删除好友
    async handleFriendDelete () {
      await friendDelete(this.dataInfo.friendId)
      this.$message.success('删除好友成功')
      this.$emit('delete')
    },
    // 移动好友
    // 打开移动好友提示窗口
    async handleOpenFriendMoveClick () {
      this.moveFriendVisible = true
      await this.$nextTick()
      this.$refs.moveFriend.reset()
    },
    // 取消移动好友操作
    handleMoveFriendCancel () {
      this.moveFriendVisible = false
    },
    // 提交移动好友操作
    handleMoveFriendSubmit (organizationId) {
      this.$emit('refresh', 'friend')
      this.dataInfo.organizationId = organizationId
      this.moveFriendVisible = false
    },
    // 修改备注
    // 打开修改备注窗口
    async handleModifyRemarkClick () {
      this.modifyRemarkVisible = true
      await this.$nextTick()
      this.$refs.remark.reset()
    },
    // 取消修改备注操作
    handleModifyRemarkCancel () {
      this.modifyRemarkVisible = false
    },
    // 提交修改备注操作
    handleModifyRemarkSubmit () {
      this.modifyRemarkVisible = false
      this.$emit('refresh', 'friend')
    }
  }
}
</script>

<style lang="scss" scoped>
$header-width: 50px;
$info-width: 420px;
$border-color: #ccc;
$border: 1px solid $border-color;
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content::-webkit-scrollbar {
    display: none;
  }
  .header {
    height: $header-width;
    line-height: $header-width;
    text-align: right;
    border-bottom: $border;
    .edit {
      margin-right: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 25px;
      cursor: pointer;
    }
  }
  .content {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    .head-info {
      margin-top: 75px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      width: $info-width;
      .user-name {
        height: 31px;
        font-weight: 400;
        font-size: 24px;
        margin-bottom: 10px;
        .sex {
          font-size: 24px;
        }
        .male {
          color: #409eff;
        }
        .female {
          color: #f56c6c;
        }
      }
      .user-motto {
        font-size: 14px;
        color: #9ca1a6;
      }
      .user-avatar {
        .avatar {
          height: 60px;
          width: 60px;
        }
      }
    }
    .other-info {
      margin: 40px 0 30px 0;
      padding: 30px 0;
      width: $info-width;
      border-top: $border;
      border-bottom: $border;
      .info-item {
        display: flex;
        min-height: 30px;
        .label {
          min-width: 60px;
          text-align: justify;
          text-align-last: justify;
          margin-right: 40px;
          color: #9ca1a6;
        }
        .remark {
          cursor: pointer;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .footer-btn {
      height: 50px;
      width: 170px;
    }
  }
}
.ctrl-group {
  .ctrl-item {
    text-align: center;
    border-bottom: $border;
    padding: 8px 0px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
    &:last-child {
      border: 0;
    }
  }
}
</style>
